<script lang="ts" setup>
import { User } from "@element-plus/icons-vue";
import { ElButton, ElCard, ElIcon, ElPopover } from "element-plus";
import { ref } from "vue";
import { router } from "../../router";
import { useLogging } from "../../stores/logging";
import LoginDialog from "./LoginDialog.vue";
import RegisterDialog from "./RegisterDialog.vue";

const loginDialog = ref<InstanceType<typeof LoginDialog>>();
const registerDialog = ref<InstanceType<typeof RegisterDialog>>();
const logging = useLogging();

const onLoginButtonClicked = () => {
  if (logging.isLoggedIn === false) {
    if (loginDialog.value) {
      loginDialog.value.open();
    }
  }
};

const switchToRegister = () => {
  if (registerDialog.value) {
    registerDialog.value.open();
  }
};

const switchToLogin = () => {
  if (loginDialog.value) {
    loginDialog.value.open();
  }
};

const goToPersonal = () => {
  void router.push("/personal");
};

const logout = () => {
  void router.push("/");
  logging.logout();
};
</script>

<template>
  <LoginDialog ref="loginDialog" @switch-to-register="switchToRegister" />
  <RegisterDialog ref="registerDialog" @switch-to-login="switchToLogin" />
  <ElPopover
    placement="bottom"
    :width="280"
    trigger="click"
    :disabled="!logging.isLoggedIn"
    popper-style="border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.12); padding: 0;"
  >
    <template #reference>
      <ElButton
        class="login-btn"
        circle
        size="large"
        @click="onLoginButtonClicked"
        aria-label="登录"
      >
        <template #icon>
          <div class="avatar-bg">
            <ElIcon size="24"><User /></ElIcon>
          </div>
        </template>
      </ElButton>
    </template>
    <template #default>
      <ElCard class="login-card">
        <template #header>
          {{ logging.getUser?.nickname }}
        </template>
        <template #default>
          <div class="user-info">
            <p>
              <span>已借阅：</span
              ><span class="info-value"
                >{{ logging.getUser?.borrowCount }}次</span
              >
            </p>
            <p>
              <span>已收藏：</span
              ><span class="info-value"
                >{{ logging.getUser?.favoriteCount }}本</span
              >
            </p>
          </div>
        </template>
        <template #footer>
          <div class="action-btns">
            <ElButton link type="primary" @click="goToPersonal"
              >个人中心</ElButton
            >
            <ElButton link type="danger" @click="logout">退出登录</ElButton>
          </div>
        </template>
      </ElCard>
    </template>
  </ElPopover>
</template>

<style lang="css" scoped>
.login-btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: box-shadow 0.2s;
  border: none;
  padding: 0;
}
.login-btn:hover {
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.15);
}
.avatar-bg {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
}
.login-card {
  box-shadow: none;
  border: none;
  background: transparent;
  margin: 0;
  padding: 0;
  width: 100%;
}
.user-info {
  margin: 0;
  padding: 16px 20px;
}
.user-info p {
  display: flex;
  justify-content: space-between;
  margin: 0 0 8px 0;
  font-size: 15px;
  color: #333;
}
.user-info p:last-child {
  margin-bottom: 0;
}
.info-value {
  font-weight: 600;
  color: #409eff;
}
.action-btns {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px 20px 16px 20px;
}
.action-btns .el-button {
  font-size: 14px;
  padding: 6px 16px;
  min-width: 80px;
}

/* Card组件样式重置 */
.login-card :deep(.el-card__header) {
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid #f0f0f0;
  font-weight: 600;
  font-size: 16px;
  color: #333;
}

.login-card :deep(.el-card__body) {
  padding: 0;
}

.login-card :deep(.el-card__footer) {
  padding: 0;
  border-top: 1px solid #f0f0f0;
}
</style>
